<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="" />
    <meta name="viewport" content="width=device-width" />
    <title>4-3-1</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 注释掉的部分：使用 :style 指令绑定 styles 对象来设置样式 -->
        <!-- <div :style="styles"></div> -->
        <!-- 使用 v-bind:style 指令动态设置样式，颜色为 activeColor ，字体大小为 fontSize 像素 -->
        <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
    </div>
    <script>
        /* 创建一个名为 app 的 Vue 实例 */
        var app = new Vue({
            el: '#app',  // 指定 Vue 实例挂载的元素
            /* 注释掉的部分：
            data: {
                styles: {
                    color:'red',
                    fontSize: 14 + 'px'
                }
            }
            */
            data: {  // 定义数据
                activeColor:'red',  // 颜色值
                fontSize: 30  // 字体大小值
            }
        });
    </script>
</body>
</html>